<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jsx语法规则</title>
</head>
<body>
  <!-- 准备容器 -->
  <div id="test"></div>
  <!-- 按照顺序引入 -->
  <script type="text/javascript" src="../../js/react.development.js"></script>
  <script type="text/javascript" src="../../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../../js/babel.min.js"></script>
  <script type="text/babel" > 
  const myId = 'aTgUiGu'
  const myData = 'heLlo,reaCt'
  // 1.定义虚拟dom不要用引号
  const VDOM = ( /*toLowerCase转化成小写  2.标签中混入js表达式要用{}*/
  // 3.样式的类名指定不能用class，要用className 
  // 4.内联样式要用style={{key:value}}形式  如果是多个单词 要用驼峰形式
  // 5.虚拟dom只能有一个根标签 标签必须闭合
  /*6.标签首字母 
  (1)若首字母小写，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
  (2)若首字母大写，则会去渲染对应的组件，若组件没有定义，则报错
  */
    <div>
      <h2 className="title" id={myId.toLowerCase()}> 
        <span style={{color:'white',fontSize:'24px'}}>
          {myData.toLowerCase()}
        </span>
      </h2>
      <input />
    </div>
  )
  ReactDOM.render(VDOM,document.getElementById('test'))
  </script> 
</body>
</html>
<style>
  .title {
    background-color: red;
  }
</style>